<template>
	<div class="index">
		<header>猫眼影视</header>
		<!-- <van-nav-bar
	    title="猫眼影视"
	    left-text="返回"
	    right-text="按钮"
	    left-arrow
	    @click-left="onClickLeft"
	    @click-right="onClickRight"
	  /> -->
		<main>
			<div id="headList">
				<van-row>
					<van-col span="6">
						<span id="">上海市</span>
						<span><van-icon name="arrow-down" /></span>
					</van-col>
					<van-col span="15"><van-search v-model="searchValue" placeholder="请输入搜索关键词"  left-icon="" input-align="center" @search="onSearch"/></van-col>
					<van-col span="3">
						<span class="search"  @click="onSearch">
							<van-icon name="search" />
						</span>
						
					</van-col>
				</van-row>
			</div>	
			
		</main>

		<van-tabbar v-model="active" @change="onChange" fixed="true" active-color="red">
			<van-tabbar-item icon="video-o">电影</van-tabbar-item>
			<van-tabbar-item icon="shop-o">影院</van-tabbar-item>
			<van-tabbar-item icon="user-o">我的</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
import { IndexBar, IndexAnchor, Notify, Tabbar, TabbarItem, Col, Row, Icon,Search  } from 'vant';
export default {
	name: 'maoyanIndex',
	components: {},
	data() {
		return {
			value1: '',
			value2: '',
			input: '',
			active: 0,
			searchValue:""
		};
	},

	mounted() {},
	methods: {
		onClickLeft() {},
		onClickRight() {},
		onChange(index) {
			// Notify({ type: 'primary', message: index+"   active:"+this.active });
		},
		onSearch(){
			if(this.searchValue ){
				Notify({ type: 'primary', message: " 搜索内容:"+this.searchValue });
			}
			
		}
	}
};
</script>
<style scoped>
.index {
	height: 100%;
	padding: 0;
	margin: 0;

	font-size: 200px;
}
main {
	flax: 1;
	font-size: 0.16rem;
}
.van-row{
	height: 0.54rem;
	line-height: .54rem;
	
}

   
.search{
	font-size:.24rem;
	color:red;
}
header {
	height: 0.5rem;
	font-size: 0.16rem;
	background-color: red;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	line-height: 0.5rem;
}
</style>
